<template>
  <div class="page">
    <el-container>
      <el-aside width="180px">
        <div v-if="data.length == 0">暂无问诊记录</div>
        <el-menu :default-active="activeIndex" @select="menuSelect">
          <el-menu-item :index="index.toString()" v-for="(item,index) in data" 
            :class="index.toString() == activeIndex ? 'activeAside' : ''">
            <img :src="item.userInfo.imageUrl" alt="" style="width:50px;height:50px">
            <span slot="title" >{{item.userInfo.ownerName}}</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <el-main class="chat_box">
        <div ref="chatContent_ref" id="chat_content" class="chat_content">
          <template v-for="(item,index) in currentContent">
            <div v-if="item.id == staffId" class="cell cell_right" >
              <div class="content content_right">
                <span class="time" style="display:flex;justify-content: flex-end;">{{item.time}}</span>
                <span class="">{{item.value}}</span>
              </div>
              <div class="img">
                <img :src="item.id == staffId ? staffImgUrl : currentPatientImgUrl">
              </div>
            </div>
            <div v-else class="cell">
              <div class="img">
                <img :src="item.id == staffId ? staffImgUrl : currentPatientImgUrl">
              </div>
              <div class="content content_left">
                <span class="time">{{item.time}}</span>
                <span class="">{{item.value}}</span>
              </div>
            </div>
          </template>     
        </div>
        
        <div class="sendMsg_box">
          <el-input v-model="message" placeholder="请输入回复内容" maxlength="100" show-word-limit></el-input>
          <el-button type="primary" @click="updateChatRoomContent">发送</el-button>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import {listenMsg,sendMsg,closeSocket} from "@/utils/socket"
import {formatTime} from "@/utils/utils"

export default {

  data() {
    return {
      staffId:"",
      staffImgUrl:"",
      data:[],
      activeIndex:'0',
      message:'',
    }
  },
  computed:{
    currentContent(){
      return this?.data[Number(this.activeIndex)]?.content
    },
    currentPatientImgUrl(){
      return this?.data[Number(this.activeIndex)]?.userInfo.imageUrl
    },
    chatRoomId(){
      return this?.data[Number(this.activeIndex)]?.chatRoomId
    }
  },
  methods: {
    getChatRoom(){
      let userInfo = this.$store.state.userInfo
      let staffId = userInfo._id
      this.staffId = staffId
      this.staffImgUrl = userInfo.imageUrl
      
      this.$API.chatRoom.findByStaffId(staffId).then(res=>{
        // console.log(res);
        this.data = res.data
        this.toChatContentBottom()
      })
    },
    menuSelect(currentIndex){
      this.activeIndex = currentIndex
      this.toChatContentBottom()
    },
    toChatContentBottom(){
      this.$nextTick(()=>{
        let chatContentElement = document.getElementById('chat_content')

        chatContentElement.scrollTo({
          left:0,
          top:chatContentElement.scrollHeight,
          behavior:'smooth'
        })
      })
      // setTimeout(()=>{
      //   let chatContentElement = document.getElementById('chat_content')

      //   chatContentElement.scrollTo({
      //     left:0,
      //     top:chatContentElement.scrollHeight,
      //     behavior:'smooth'
      //   })

      // },500)
    },
    updateChatRoomContent(){
      console.log(this.chatRoomId);

      this.$API.chatRoom.updateContent(this.chatRoomId,{
        id:this.staffId,
        value:this.message,
        time:formatTime(Date.now())
      }).then(res=>{
        if (res.code = 201) {
          this.message = ""

          sendMsg({
            from:'doctor',
            haveNewMsg:true,
            chatRoomId:this.chatRoomId
          })
        } 
        
      })
    },
  },
  mounted(){
    this.getChatRoom()
    listenMsg(msg=>{
      let data = JSON.parse(msg.data)

      // console.log("接收到的消息",data,this.chatRoomId);

      // if(data.chatRoomId == this.chatRoomId){
      //   this.getChatRoom()
      // }
      this.getChatRoom()
    })
  },
}
</script>

<style lang='less' scoped>
.page{
  margin-top: 30px;
  .activeAside{
    background-color: rgb(236, 245, 255);
  }
  .el-menu-item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
    img{
      border-radius: 50%;
    }
  }
  .chat_box{
    position: relative;
    width: 100%;
    height: 80vh;
    padding-bottom: 80px;
    box-sizing: border-box;
    .chat_content{
      width: 100%;
      height: 97%;
      overflow-y: scroll;
      padding-right:16px;
      padding-bottom: 15px;
      box-sizing: border-box;
      &::-webkit-scrollbar{
        width: 6px;
        height: 6px;
      }
      &::-webkit-scrollbar-button {
        display: none;
      }
      &::-webkit-scrollbar-thumb {
        background: rgba(144, 147, 153, 0.3);
        cursor: pointer;
        border-radius: 4px;
      }
      &::-webkit-scrollbar-corner {
        display: none;
      }
      &::-webkit-resizer {
        display: none;
      }
      .cell{
        width: 100%;
        display: flex;
        gap:16px;
        margin-top: 15px;
        img{
          width: 50px;
          height: 50px;
          border-radius: 50%;
        }
        .content{
          margin-top: 20px;
          max-width: 50%;
          display: flex;
          flex-direction: column;
          padding: 8px 12px;
          .time{
            color: #333;
            font-size: 12px;
            margin-bottom: 4px;
          }
        }
        .content_left{
          background: #FFFFFF;
          box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.16);
          border-radius: 0px 16px 16px 16px;
        }
        .content_right{
          background: #1E69FF;
          color: #fff;
          box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.16);
          border-radius: 16px 0px 16px 16px;
        }
      }
      .cell_right{
        justify-content: flex-end;
      }
    }
    .sendMsg_box{
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      padding: 0 16px;
      padding-right: 20px;
      box-sizing: border-box;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .el-input{
        width: 90%;
      }
      .el-button{
        width: 5.5vw !important;
      }
    }
  }
}
  
</style>